<!-- 视图实时 -->

<template>
  <div :class="realtimeClass" :style="realtimeStyle">
    <img v-bind="imgProps" />

    <div class="Secure-MapView-point-tip noMove">
      <div class="MajorTitle">
        <span class="MajorTitle-prop">{{ obj.person.userName }}</span>
      </div>
      <div>{{ obj.person.areaName || '-' }}</div>
      <div>{{ CORE.timeStr(obj.person.time) || '-' }}</div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import UTIL from '@admin/views/Secure/Patrol/UTIL'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ViewRealtime',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb('map', 'map_')],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 父组件视图
     */
    parentView() {
      return CORE.componentParent(this, 'MapView') || {}
    },

    /**
     * 实时样式类
     */
    realtimeClass() {
      const name = 'Secure-MapView-realtime'
      const hideStr = this.hide ? ` ${name}-hide` : ''
      return `${name}${hideStr} noMove`
    },

    /**
     * 实时样式对象
     */
    realtimeStyle() {
      const { obj, $parent: { readyImg }, parentView: { scale = 1, rotate = 0 } } = this
      const { longitude: left, latitude: top } = obj
      const opacity = readyImg ? 1 : 0
      const display = left && top ? null : 'none'
      const transform = `translate(-50%, -50%) scale(${1 / scale}) rotate(${-rotate}deg)`
      return { display, opacity, left, top, transform }
    },

    /**
     * 图片属性
     */
    imgProps() {
      return { src: UTIL.getImg('user.png') }
    },
  },
}
</script>
